<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }

        table {
            text-align: center;
        }
    </style>
</head>

<body>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <div id="box">
        <h1>新闻列表</h1>
        名称：<input type="text" v-model="a">
        链接：<input type="text" v-model="b">
        描述：<input type="text" v-model="c">
        <button @click="add()">添加</button>
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>链接</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 不使用自定义指令实现隔行换色 -->
                <!-- <tr v-for="(item,index) in arr" :key="item.id"
                    v-bind:style="index % 2 === 0 ? { backgroundColor: 'red' } : { backgroundColor: 'green' }">
                    <td>{{item.name}}</td>
                    <td>{{item.lianjie}}</td>
                    <td>{{item.miaoshu}}</td>
                    <td><button v-on:click="del(item.id)">删除</button></td>
                </tr> -->
                <tr v-for="(item,index) in arr" :key="item.id" v-color="index">
                    <td>{{item.name}}</td>
                    <td>{{item.lianjie}}</td>
                    <td>{{item.miaoshu}}</td>
                    <td><button v-on:click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.directive("color", function (ele, binding) {
            if (binding.value % 2 == 0) {
                ele.style.backgroundColor = "red"
            } else {
                ele.style.backgroundColor = "blue"
            }
        })
        new Vue({
            el: "#box",
            data: {
                arr: [{
                    id: 1,
                    name: "今日头条",
                    lianjie: "1111",
                    miaoshu: "新闻"
                }, {
                    id: 2,
                    name: "今日快讯",
                    lianjie: "2222",
                    miaoshu: "热点"
                }],
                a: "",
                b: "",
                c: "",
                id: "",
            },
            methods: {
                del(id) {
                    var a = this.arr.find(item => item.id == id)
                    this.arr.splice(a, 1)
                },
                add() {
                    if (this.a != "" && this.b != "" && this.c != "") {
                        this.arr.push({
                            id: this.arr.length + 1,
                            name: this.a,
                            lianjie: this.b,
                            miaoshu: this.c,
                        })
                    } else {
                        alert("输入不能为空")
                    }
                    this.a = ""
                    this.b = ""
                    this.c = ""
                }
            }
        })
        
    </script>
</body>

</html>